<!DOCTYPE HTML>
<html>
	<head>
		<title>改变图像</title>
	</head>
	<body>
	<script type="text/javascript">
        //动态地改变 HTML <image> 的来源 (src)：The Light bulb
		    function changeImage(){
		    	//获取元素
		    	element = document.getElementById('myimage');
		    	//element.src.match("bulbon")意思是 Src路径里有bulbon匹配则为true.如果一开始的图片是/i/eg_bulbon.gif，那么就会匹配到bulbon
		    	if(element.src.match("bulbon")){
		    		element.src = "../img/eg_bulboff.gif"; //if语句为ture，执行if语句，图片转换为/i/eg_bulboff.gif；
		    	}else{
		    		//如果没匹配到bulbon，执行else语句，图片转换为/i/eg_bulbon.gif。这样就实现了用js对html图片的改变
		    		element.src = "../img/eg_bulbon.gif";
		    	}

		    }
		</script>
	    <img id="myimage" onclick="changeImage()"  src="../img/eg_bulboff.gif" >
		<p>点击这个灯泡来点亮或者关闭这盏灯</p>
	</body>
</html>